<template>
  <!-- 底部悬浮 -->
  <div
    class="footer_btn"
    :class="{ 'tc-height': data.budgetType == 2 && data.isEdit, 'edit-wrap': !data.isEdit || data.budgetType != 2 }"
  >
    <template v-if="data.isEdit">
      <!-- 套餐 -->
      <div class="tc-wrap" v-if="data.budgetType == 2">
        <div class="package_restrictions">
          <el-row style="width: 100%">
            <el-col :span="8">
              <div class="package_restrictions_child">
                <span>
                  <!-- <i class="icon">*</i> -->
                  套餐价
                </span>
                <el-input-number
                  class="jzt-input-number jzt-input-number-hidden price ml10 mr5"
                  controls-position="right"
                  :disabled="!data.isEdit"
                  v-model="data.comprehensiveItems.packageUnitPrice"
                  @change="getTotalPrice"
                  style="width: 40%"
                ></el-input-number>
                <span class="f12" style="color: #86909c">/</span>
                <el-select
                  class="ml5"
                  v-model="data.comprehensiveItems.packageUnitTypeStr"
                  placeholder="请选择"
                  style="width: 100px"
                  @change="handCreateSku"
                >
                  <el-option v-for="(item, index) in units" :key="index" :label="item.dictLabel" :value="item.dictValue" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="package_restrictions_child">
                <span><i class="icon">*</i>套餐包含方量</span>
                <el-input-number
                  class="ml10 mr5"
                  :controls="false"
                  :disabled="!data.isEdit"
                  v-model="data.comprehensiveItems.packageSquareNum"
                  @change="getTotalPrice"
                  style="width: 40%"
                ></el-input-number>
                <span class="f12" style="color: #86909c">{{
                  useCodeArrStore().getDictName("shop_unit", data.comprehensiveItems.packageUnitTypeStr) || "-"
                }}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="package_restrictions_child">
                <span>
                  <!-- <i class="icon">*</i> -->
                  超出套餐外
                </span>
                <el-input-number
                  class="ml10 mr5"
                  :controls="false"
                  :disabled="!data.isEdit"
                  v-model="data.comprehensiveItems.packageOverUnitPrice"
                  style="width: 40%"
                ></el-input-number>
                <span class="f12" style="color: #86909c"
                  >元/{{ useCodeArrStore().getDictName("shop_unit", data.comprehensiveItems.packageUnitTypeStr) || "-" }}</span
                >
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="foot-bottom-tc">
          <div class="top mt10 mb4">
            <div class="package_restrictions_child">
              <span class="f16"
                >套餐合计:
                <span class="f16" style="color: red; font-weight: bold"> ￥ </span>
                <el-input-number
                  class="total-price jzt-input-number jzt-input-number-hidden"
                  controls-position="right"
                  :disabled="!data.isEdit"
                  :min="0"
                  precision="2"
                  v-model="data.comprehensiveItems.packageTotalPrice"
                  style="width: 20%"
                  @change="data.comprehensiveItems.isCustomTotalPrice = 1"
                ></el-input-number>
                <i class="f12" style="font-style: normal; color: #86909c">
                  （超出：每{{ useCodeArrStore().getDictName("shop_unit", data.comprehensiveItems.packageUnitTypeStr) || "-" }}按
                  <b style="color: #4e5969">¥{{ data.comprehensiveItems.packageOverUnitPrice }}</b> 计费/当前：
                  <b style="color: #4e5969">{{ data.comprehensiveItems.packageSquareNum }}</b
                  >{{ useCodeArrStore().getDictName("shop_unit", data.comprehensiveItems.packageUnitTypeStr) || "-" }}）
                </i>
              </span>
            </div>
            <el-button type="primary" size="medium" @click="handelClickSave">完成</el-button>
          </div>

          <div class="bottom">
            <div class="btn">
              <el-button type="primary" size="small" link @click="handelClickFixedSellingPrice" style="padding-left: 0">
                指定商品固定销售价({{ data.comprehensiveItems.productPriceNum }})
              </el-button>
              <el-divider direction="vertical" />
              <el-button type="primary" size="small" link @click="handelClickCanNotImporQrtuta">
                设置不能导入的定额模版({{ data.comprehensiveItems.productQuoteNum }})
              </el-button>
            </div>
            <div>
              定额总数：{{ data.comprehensiveItems.quotaNum }}项 / 材料总数：{{ data.comprehensiveItems.productNum }}项
              <span v-if="data.comprehensiveItems.softDecorationStatus !== 1">
                / 综合总数：{{ data.comprehensiveItems.comprehensiveNum }}项
              </span>
            </div>
          </div>
          <div class="foot-right"></div>
        </div>
      </div>

      <!-- 清单 -->
      <div class="qd-wrap" v-if="data.budgetType != 2">
        <div class="foot-bottom">
          <div class="foot-left">
            <div class="btn mb10">
              <el-button type="primary" size="small" link @click="handelClickFixedSellingPrice" style="padding-left: 0">
                指定商品固定销售价({{ data.comprehensiveItems.productPriceNum }})
              </el-button>
              <el-divider direction="vertical" />
              <el-button type="primary" size="small" link @click="handelClickCanNotImporQrtuta">
                设置不能导入的定额模版({{ data.comprehensiveItems.productQuoteNum }})
              </el-button>
            </div>
            <div>
              定额总数：{{ data.comprehensiveItems.quotaNum }}项 / 材料总数：{{ data.comprehensiveItems.productNum }}项
              <span v-if="data.comprehensiveItems.softDecorationStatus !== 1">
                / 综合总数：{{ data.comprehensiveItems.comprehensiveNum }}项
              </span>
            </div>
          </div>
          <div class="foot-right">
            <el-button type="primary" size="medium" @click="handelClickSave">完成</el-button>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div></div>
      <el-button type="primary" @click="handelClickEdit">
        编辑预算报价模板
        <el-icon class="ml6"><Edit /></el-icon>
      </el-button>
    </template>

    <!-- 设置不能导入定额模板 -->
    <elDrawerView
      :show="data.isImportQrtuotaCannot"
      :title="'选择定额模版'"
      :size="'80%'"
      @close="handelCloseisImportQrtuotaCanNot"
    >
      <impoQrtuotaCanNot
        @getList="handelGetDateCanNot"
        :templateId="data.budgetItem.templateId"
        :setNum="data.setNum"
      ></impoQrtuotaCanNot>
      <div class="quota_btn">
        <el-button type="" @click="handelSaveQuotaCannot">取消</el-button>
        <el-button type="primary" @click="handelQuotaSubmitCannot">保存</el-button>
      </div>
    </elDrawerView>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, nextTick, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Plus, Bottom, QuestionFilled, Edit } from "@element-plus/icons-vue";
import Sortable from "sortablejs";
import { ElMessage } from "element-plus";
import useCodeArrStore from "@/store/modules/select";
// 组件
import draggList from "./components/draggList";
import spaceList from "./components/spaceList";
import elDrawerView from "./components/elDrawerView";
import impoQrtuota from "./components/ImpoQrtuota/index.vue";
import impoQrtuotaCanNot from "./components/impoQrtuotaCanNot/index.vue";
import dialogView from "@/components/dialogCompontent";
import commodityView from "./components/ImportMaterials/commodityView.vue";
import { formatDate } from "@/utils/formatDate";
// api
import {
  basicSave,
  getBudgetQuotationList,
  getBudDelete,
  templateCopy,
  spaceSave,
  getSpaceList,
  spaceCopy,
  spaceDelete,
  templateDetail,
  deleteSpaceItem,
  comprehensiveSave,
  comprehensiveDelete,
  detailSave,
  quotaProductConditionList,
  quotaProductList,
  importQuota,
  importMaterials,
  noPopSave,
  batchSort,
  setTemplateTime,
  getContractTypeList,
  updateTemplateStatus
} from "@/apis/budgetQuotation";
import { saveOrUpdate } from "@/apis/createFile/index.js";
import { quotaWorkerLists } from "@/apis/createFile/index.js";
// 变量
import drag from "@/static/images/drag.png";
import package_01 from "@/static/images/package_02.png";
import package_02 from "@/static/images/package_01.png";
import RemarkEditor from "@/components/RemarkEditor";
const router = useRouter();
const route = useRoute();

const spaceListRef = ref();
const containerRef = ref();
const formRef = ref();
const ruleFormRef = ref();
const commodityViewRef = ref();
const formItemRef = ref();
const comprehensiveFrom = ref({ isAutoNewSpace: 0, moneyType: 1 });
const rules = ref({
  itemName: [
    { required: true, message: "请输入名称", trigger: "blur" },
    { min: 1, max: 20, message: "最大长度为20", trigger: "blur" }
  ],
  moneyType: [{ required: true, message: "请选择计算方式", trigger: "blur" }],
  feeRate: [{ required: true, message: "请输入比例", trigger: "blur" }],
  linkTypes: [{ required: true, message: "请输选择关联报价", trigger: "blur" }],
  linkSpces: [{ required: true, message: "请选择关联空间", trigger: "blur" }],
  isAutoNewSpace: [{ required: true, message: "请选择是否开启自动关联", trigger: "blur" }]
});
const productCheckedNum = ref(null);
const currProject = ref({});
const units = ref([]); //单位shop_unit

const data = ref({});
const props = defineProps({
  Data: {
    type: Object,
    default: () => {}
  },
  price: {
    type: Object,
    default: () => {}
  }
});

const price = computed(() => {
  return props.price;
});

watch(
  () => props.Data,
  val => {
    data.value = val;
  },
  { deep: true, immediate: true }
);

const handelBlur = element => {
  spaceListRef.value.handelBlur(element);
};
const handelClickOperate = (element, item) => {
  spaceListRef.value.handelClickOperate(element, item);
};

const onFocus = event => {
  spaceListRef.value.onFocus(event);
};

const handleClickAnchorLink = e => [e.preventDefault()];

// ===================================================================================================================

/**
 *
 * @param type num 1-正价商品 2-特价商品
 * @param val
 */
const changePrice = (type, val) => {
  if (type === 1) {
    if (val !== null) {
      price.value.regularViewStatus = 1;
    } else {
      price.value.regularViewStatus = 0;
    }
  } else if (type === 2) {
    if (val !== null) {
      price.value.specialViewStatus = 1;
    } else {
      price.value.specialViewStatus = 0;
    }
  }
};

const getContractType = async () => {
  let res = await getContractTypeList();
  data.value.contractTypeList = res.data;
};

const getTotalPrice = () => {
  data.value.comprehensiveItems.packageTotalPrice =
    Number(data.value.comprehensiveItems.packageUnitPrice) * Number(data.value.comprehensiveItems.packageSquareNum);
};

// 方法

// 确定引用
const handelClickOk = () => {
  // emits("ok", data.processView);
  console.log(data.value.budgetItem, "data.processView");
  data.value.materialsAndProcesses = {};
  data.value.materialsAndProcesses.picUrlList = data.value.processView?.picUrlList;
  data.value.materialsAndProcesses.picIdList = data.value.processView?.picIdList;
  data.value.materialsAndProcesses.videoUrlList = data.value.processView?.videoUrlList;
  data.value.materialsAndProcesses.videoIdList = data.value.processView?.videoIdList;
  data.value.materialsAndProcesses.shortcomingDesc = data.value.processView?.shortcomingDesc;
  data.value.materialsAndProcesses.standardDesc = data.value.processView?.standardDesc;
  data.value.isAccept = false;
  const parms = {
    projectId: data.value.processView.projectId,
    quotaType: 2,
    quotaId: data.value.processView.quotaId,
    ...data.value.materialsAndProcesses
  };
  saveOrUpdate(parms)
    .then(res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "保存成功"
        });
        data.value.isAccept = false;
        getSpaceArrList(); //刷新table列表
        // getList();
      }
    })
    .catch(err => {
      console.log(err);
    });
};

// 删除工艺视频
const handelClickDeletVideo = (item, index) => {
  data.value.processView.videoUrlList.splice(index, 1);
};
// 编辑时删除工艺图片
const handelClickDeletPicter = (item, index) => {
  data.value.processView.picUrlList.splice(index, 1);
};

//====================================图片上传========================================================================================
import { imgsUpload } from "@/apis/products/specifications";
import useMultipartOssStore from "@/store/modules/multipartOssStore.js";
const ossStore = useMultipartOssStore();
const FileList = ref([]); //商品图片list
const imgFileList = ref([]); //编辑时商品图片list
const videoList = ref([]); //商品视频list
const uploadImg = ref();
const uploadVideo = ref();
const videoListAll = ref([]);
// const imgIsReady = ref(false);
import {
  getFolder,
  _debounce //防抖，多次频繁触发时，只执行最后一次
} from "@/utils/index";
const handleAvatarChangeIcon = _debounce(async (file, fileList, type = "img") => {
  //选中文件触发的change事件
  console.log("触发文件上传==", fileList);
  let _fileList = fileList.filter(item => item.status === "ready"); //未上传成功的图片
  const flag = await fileType(type, type === "img" ? _fileList : [file]);
  if (!flag) {
    const errorFile = [];
    const successFile = [];
    if (type === "img") {
      ElMessage({
        message: "只能上传jpeg，jpg，png图片文件，大小不超过5M",
        type: "error",
        offset: 60
      });
      for (let item of _fileList) {
        if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png") || item.raw.size > 1024 * 1024 * 5) {
          errorFile.push(item);
        } else {
          successFile.push(item);
        }
      }
      // const errorFile = _fileList.filter(
      //   item => !(item.raw.type === "image/jpeg" || item.raw.type === "image/png") || item.raw.size > 1024 * 1024 * 5
      // );
      for (let item of errorFile) {
        uploadImg.value.handleRemove(item);
      }
    } else if (type === "video") {
      ElMessage({
        message: "只能上传视频文件，并且视频时长不超过45秒，大小不超过100M",
        type: "error",
        offset: 60
      });
      for (let item of _fileList) {
        if (!(item.raw.type === "video/mp4") || item.raw.size > 1024 * 1024 * 100) {
          errorFile.push(item);
        } else {
          successFile.push(item);
        }
      }
      // const errorFile = _fileList.filter(item => !(item.raw.type === "video/mp4"));
      for (let item of errorFile) {
        uploadVideo.value.handleRemove(item);
      }
      return;
    }
    if (successFile.length <= 0) return;
  }
  //   imgIsReady.value = false;
  if (type === "img") {
    FileList.value = fileList;

    for (let item of _fileList) {
      await customUpload(item, { file: item }, type);
    }
  } else {
    // videoList.value = fileList;
    videoList.value = [file];

    console.log("AAAAAAAAAAAAAA", videoList.value);
    for (let item of videoList.value) {
      console.log(111111111);
      await customUpload(item, { file: item }, type);
    }
  }
}, 100);
/**
 * 校验文件类型
 */
const fileType = async (type, fileList) => {
  let flag = true;
  if (type === "img") {
    for (let item of fileList) {
      if (!((item.raw.type === "image/jpeg" || item.raw.type === "image/png") && item.raw.size <= 1024 * 1024 * 5)) {
        flag = false;
      }
      if (!(item.raw.type === "image/jpeg" || item.raw.type === "image/png")) {
        flag = false;
      }
    }
  } else if (type === "video") {
    for (let item of fileList) {
      // console.log("视频的大小===", item.raw.size);
      if (!(item.raw.type === "video/mp4" && item.raw.size <= 1024 * 1024 * 100)) {
        flag = false;
      }
      if (item.raw.type === "video/mp4") {
        await getTimes(item.raw);
        // console.log("视频的时长===", item.raw.size <= 1024 * 1024 * 100, videoTime.value);
        if (!(videoTime.value <= 45)) {
          flag = false;
        }
      }
    }
  }
  return flag;
};
/**
 * 获取视频时间长度
 */
const videoTime = ref(0);
const getTimes = async file => {
  let content = file;
  //获取录音时长
  let url = URL.createObjectURL(content);
  //经测试，发现audio也可获取视频的时长
  let audioElement = new Audio(url);
  console.log(2222);
  await new Promise((resolve, reject) => {
    audioElement.addEventListener("loadedmetadata", _event => {
      //保存获取时间长度
      videoTime.value = parseInt(audioElement.duration);
      resolve("时长获取成功");
    });
  });
};

/**
 * 上传
 */
const getFileName = name => {
  const arr = name.split(".");
  const _arr = JSON.parse(JSON.stringify(arr));
  let _name = "";
  let _suffix = "";
  if (arr.length > 2) {
    _arr.splice(_arr.length - 1, 1);
    _name = _arr.join(".");
    _suffix = arr[arr.length - 1];
  } else {
    _name = arr[0];
    _suffix = arr[1];
  }
  const folder = getFolder();
  return folder + _name + new Date().getTime() + "." + _suffix;
};
const customUpload = async (item, option, type) => {
  console.log(222222222222);
  // 合并已上传和当前上传文件
  const objName = getFileName(option.file.name);
  await ossStore
    .submit(objName, option.file.raw)
    .then(async res => {
      await ossStore.setACL(objName, fileReadRole.publicRead);
      res.fileUrl = await ossStore.signatureUrl(objName);
      console.log("文件上传成功，地址为===", res.fileUrl.split("?")[0]);
      if (type === "img") {
        item["img"] = res.fileUrl.split("?")[0];
        data.value.processView.picUrlList.push(res.fileUrl.split("?")[0]);
      } else {
        item["video"] = res.fileUrl.split("?")[0];
        console.log("视频===", videoList.value);
        data.value.processView.videoUrlList?.push(videoList.value[0].video);
        console.log(data.value.processView.videoUrlList, "data.processView.videoUrlList");
      }
      item["folder"] = objName;

      const Option = JSON.parse(JSON.stringify(option));
      uploadIMG(Option); //图片上传到业务端
    })
    .catch(err => {
      alert(JSON.stringify(err));
    });
};

//将图片上传到业务端服务
const uploadIMG = option => {
  const nameArr = option.file.name.split(".");
  const uploadArr = [
    {
      fileId: option.file.uid,
      objectName: option.file.folder, //目录＋文件名称
      url: option.file.img || option.file.video,
      access: "public-read",
      fileName: option.file.name, //文件名称
      bucketName: "51-jzt-dev",
      size: option.file.size,
      type: true,
      suffix: nameArr[nameArr.length - 1]
    }
  ];
  imgsUpload(uploadArr).then(res => {
    console.log(909090, res);
  });
};
const fileReadRole = {
  defaultRole: "",
  privateRole: "private",
  publicRead: "public-read",
  publicReadWrite: "public-read-write"
};

// watch(
//   () => imgFileList.value,
//   list => {
//     console.log(list, "wwww");
//     let arr = [];
//     list.map(it => {
//       arr.push(it.img);
//     });
//     data.acceptanceCriteria.picUrlList = arr;
//     console.log(arr, "---------------");
//   },
//   { deep: true }
// );

const handelClickAdd = () => {
  data.value.addTemplateShow = true;
};
const handelClose = () => {
  data.value.addTemplateShow = false;
};
const handelSaveAdd = () => {
  formRef.value.validate(valid => {
    if (!valid) return;
    data.value.addTemplateShow = false;

    const parms = {
      budgetName: "测试新增的预算报价模板",
      budgetType: data.value.addType,
      showOrder: 1,
      contractType: data.value.contractType
    };
    //   新增预算报价接口
    basicSave(parms)
      .then(async res => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "新增预算报价模版成功"
          });
          // 创建成功后获取列表
          await handelClickSave([], false, false);
          await getList();

          nextTick(() => {
            setTimeout(() => {
              // 添加成功之后，自动选中新增的模板
              const obj = res.data || data.value.normalList[0];
              handelclickItem(obj);
            }, 1000);
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  });
};
// 整个模板是否可以编辑
const handelClickEdit = () => {
  data.value.isEdit = true;
};
// 固定销售价格-----------------------------------------------------------------start
const handelClickFixedSellingPrice = () => {
  // console.log(data.budgetItem);
  router.push({
    path: "/fixed-selling-price",
    query: {
      templateId: data.value.budgetItem.templateId
    }
  });
};
// 固定销售价格-----------------------------------------------------------------end
// 导入材料--------------------------------------------------------------------start
const handelClickAddComprehensiveImportMaterials = item => {
  console.log(item, "导入材料触发事件");
  data.value.spaceId = item.spaceId;
  data.value.commodityVisible = true;
};
const handelCloseImport = () => {
  data.value.commodityVisible = false;
};
const handelSubmitImport = list => {
  const params = {
    spaceId: data.value.spaceId,
    list: list
  };
  importMaterials(params).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "材料导入成功"
      });
      commodityViewRef.value.reset();
      data.value.commodityVisible = false;
      // getDetail();
      handelClickSave([], false, false);
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
// 设置不能导入的定额模板--------------------------------------------------------start
const handelSaveQuotaCannot = () => {
  data.value.isImportQrtuotaCannot = false;
};
const handelQuotaSubmitCannot = () => {
  console.log("ooooo");
  // 获取最终的quotaId组成数组
  const arr = [];
  data.value.canNotList.map(it => {
    arr.push(it.quotaId);
  });
  const params = {
    templateId: data.value.budgetItem.templateId,
    quotaIdList: arr
  };
  noPopSave(params).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "设置不能导入的定额模板成功"
      });
      // 关闭弹框
      data.value.isImportQrtuotaCannot = false;
      // 获取列表
      getDetail();
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
const handelClickCanNotImporQrtuta = () => {
  data.value.isImportQrtuotaCannot = true;
  data.value.setNum = data.value.setNum + 1;
};
const handelGetDateCanNot = list => {
  console.log(list, "不能导入模板最后list");
  data.value.canNotList = list;
};
const handelCloseisImportQrtuotaCanNot = () => {
  data.value.isImportQrtuotaCannot = false;
};
// 设置不能导入的定额模板--------------------------------------------------------end
// 导入材料--------------------------------------------------------------------end
// 导入定额--------------------------------------------------------------------start
const handelClickAddComprehensiveImportQuota = item => {
  console.log(item, "------------");
  // 赋值空间id
  data.value.spaceId = item.spaceId;
  // 打开抽屉弹框
  data.value.isImportQrtuota = true;
};
const handelCloseisImportQrtuota = () => {
  data.value.isImportQrtuota = false;
};
const handelGetDate = list => {
  console.log(list, "最后的数据");
  data.value.quotaIportList = list;
};
const handelSaveQuota = () => {
  data.value.isImportQrtuota = false;
};
const handelQuotaSubmit = () => {
  data.value.isImportQrtuota = false;
  const arr = [];
  data.value.quotaIportList.map(it => {
    arr.push(it.quotaId);
  });
  const params = {
    spaceId: data.value.spaceId,
    list: arr
  };
  importQuota(params).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "定额导入成功"
      });
      // getDetail();
      handelClickSave([], false, false);
    } else {
      ElMessage({
        type: "error",
        message: res.msg
      });
    }
  });
};
// 导入定额--------------------------------------------------------------------end

// 工艺查看----------------------------------------------------------------------start
const handelClickProcessView = item => {
  console.log(item, "processView");
  data.value.processView = item;
  data.value.processDescription = item;
  data.value.isAccept = true;
};
const handelCloseIsAccept = () => {
  data.value.isAccept = false;
};
// 工艺查看----------------------------------------------------------------------end
// 查看主材明细-------------------------------------------------------------------start
const handelClickMainMaterialDetails = (item, str) => {
  console.log(item);
  data.value.isZoRfc = str;
  // 1更具商品添加2组合
  data.value.mainProductShowType = item.mainProductShowType;
  data.value.auxiliaryProductShowType = item.auxiliaryProductShowType;
  data.value.isMaterialDetails = true;
  data.value.quotaType = item.quotaType;

  let prodType = 1;
  if (str === "主材") {
    prodType = 1;
    if (item.mainProductShowType == 1) {
      // 固定商品
      quotaProductList(item.quotaId, prodType).then(res => {
        data.value.spObject = res.data;
        productCheckedNum.value = res.data.productCheckedNum;
        console.log(111, data.value.spObject);
      });
    } else if (item.mainProductShowType == 2) {
      // 组合条件
      quotaProductConditionList(item.quotaId, prodType).then(res => {
        data.value.zhObject = res.data;
        console.log(222, data.value.zhObject);
      });
    }
  } else if (str === "辅材") {
    prodType = 2;
    if (item.auxiliaryProductShowType == 1) {
      // 固定商品
      quotaProductList(item.quotaId, prodType).then(res => {
        data.value.spObject = res.data;
        productCheckedNum.value = res.data.productCheckedNum;
        console.log(333, data.value.spObject);
      });
    } else if (item.auxiliaryProductShowType == 2) {
      // 组合条件
      quotaProductConditionList(item.quotaId, prodType).then(res => {
        data.value.zhObject = res.data;
        console.log(444, data.value.zhObject);
      });
    }
  }
};
// 人工明细----------------------------------------------------------------------start
const handelClickLabor = item => {
  data.value.isLabor = true;
  // data.quotaId = item.quotaId;
  quotaWorkerLists(item.quotaId).then(res => {
    data.value.costTotalMoneybjp = res.data.costTotalPrice;
    data.value.quoteTotalMoneybjp = res.data.quoteTotalPrice;
    data.value.manualQuotationData = res.data.quotaWorkerVOList;
  });
};
const handelCloseLabor = () => {
  data.value.isLabor = false;
};
const handelSubmitPbj = () => {
  data.value.isLabor = false;
};
// 人工明细----------------------------------------------------------------------end
const handelCloseMaterialDetails = () => {
  data.value.isMaterialDetails = false;
};
const handelSaveAddMaterialDetails = () => {
  data.value.isMaterialDetails = false;
};
// 查看主材明细-------------------------------------------------------------------end
// 综合项------------------------------------------------------------------------start
const handelClickDeletComprehensiveItem = item => {
  if (!data.value.isEdit) {
    ElMessage({
      type: "warning",
      message: "请先点击编辑预算报价模板"
    });
    return;
  }
  const parms = {
    itemId: item.itemId
  };
  comprehensiveDelete(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      getDetail();
    }
  });
};
const handelClickAddComprehensiveItems = () => {
  if (!data.value.isEdit) {
    ElMessage({
      type: "warning",
      message: "请先点击编辑预算报价模板"
    });
    return;
  }
  data.value.addComprehensiveShow = true;
  comprehensiveFrom.value = { isAutoNewSpace: 0, moneyType: 1 };
  // 点击新增关闭编辑状态
  data.value.isZhEdit = false;
};
const itemId = ref();
const handelSaveAddComprehensiveShow = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      const { itemMoney, itemName, moneyType, feeRate, linkTypes, linkSpces, isAutoNewSpace, remark } = comprehensiveFrom.value;
      const parms = {
        templateId: data.value.budgetItem.templateId,
        itemMoney,
        itemName,
        moneyType,
        feeRate,
        remark,
        linkTypes: linkTypes ? linkTypes?.join(",") : "",
        linkSpces: linkSpces ? linkSpces?.join(",") : "",
        isAutoNewSpace: isAutoNewSpace
      };
      if (data.value.isZhEdit) {
        parms.itemId = itemId.value;
      }
      comprehensiveSave(parms)
        .then(res => {
          if (res.code == 200) {
            ElMessage({
              type: "success",
              message: "新增综合项成功"
            });
            data.value.addComprehensiveShow = false;
            getDetail();
          }
        })
        .catch(err => {
          console.log(err);
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};
const handelClickComprehensiveEdit = item => {
  if (!data.value.isEdit) {
    ElMessage({
      type: "warning",
      message: "请先点击编辑预算报价模板"
    });
    return;
  }
  data.value.addComprehensiveShow = true;
  // 点击编辑开启编辑状态
  data.value.isZhEdit = true;
  // 赋值
  itemId.value = item.itemId;
  console.log(item);
  comprehensiveFrom.value.itemName = item.itemName;
  comprehensiveFrom.value.moneyType = Number(item.moneyType);
  comprehensiveFrom.value.feeRate = item.feeRate;
  comprehensiveFrom.value.linkTypes = item.linkTypes.split(",");
  comprehensiveFrom.value.linkSpces = item.linkSpces.split(",");
  comprehensiveFrom.value.isAutoNewSpace = item.isAutoNewSpace;
};
const handelCloseComprehensiveShow = () => {
  data.value.addComprehensiveShow = false;
};
// 综合项------------------------------------------------------------------------end

/**
 *
 * @param arr
 * @param type 1-清单 2-套餐
 */
const dragEndFun = (dragArr, type) => {
  if (dragArr.length > 0) {
    dragArr.map((item, index) => {
      item.showOrder = index + 1;
    });
    batchSort({ list: dragArr })
      .then(res => {
        if (res.code === 200) {
          ElMessage({
            message: "排序修改成功",
            type: "success"
          });
        }
      })
      .finally(async () => {
        await handelClickSave([], false, false);
        getList();
      });
    // const Arr = [];
    // dragArr.map((item, index) => {
    //   const obj = data.comprehensiveItems.spaceList.find(obj => obj.spaceId === item.spaceId);
    //   obj.showOrder = index + 1;
    //   Arr.push(obj);
    // });
    // data.comprehensiveItems.spaceList = Arr;
  }
};

// 点击完成
const handelClickSave = async (dragArr = [], changeEdit = true, showMessage = true) => {
  if (Object.keys(data.value.budgetItem).length <= 0) {
    ElMessage({
      type: "warning",
      message: "请先选择预算报价模版项"
    });
    return;
  }
  console.log(
    222,
    (!data.value.comprehensiveItems.packageUnitTypeStr && !String(data.value.comprehensiveItems.packageUnitTypeStr)) ||
      !String(data.value.comprehensiveItems.packageSquareNum),
    String(data.value.comprehensiveItems.packageUnitTypeStr),
    String(data.value.comprehensiveItems.packageSquareNum)
  );
  if (
    ((!data.value.comprehensiveItems.packageUnitTypeStr && Number(data.value.comprehensiveItems.packageUnitTypeStr) !== 0) ||
      (!data.value.comprehensiveItems.packageSquareNum && Number(data.value.comprehensiveItems.packageSquareNum) !== 0)) &&
    data.value.budgetType == 2
  ) {
    return ElMessage({
      type: "error",
      message: "请完善套餐价单位、套餐包含方量"
    });
  }
  let parm = {
    templateId: data.value.budgetItem.templateId,
    ...data.value.comprehensiveItems
  };
  if (dragArr.length > 0) {
    const Arr = [];
    dragArr.map((item, index) => {
      const obj = data.value.comprehensiveItems.spaceList.find(obj => obj.spaceId === item.spaceId);
      obj.showOrder = index + 1;
      Arr.push(obj);
    });
    data.value.comprehensiveItems.spaceList = Arr;
  }
  delete parm.showOrder; //删掉当前报价模板的排序号

  // console.log("完成的参数===", { ...parm, ...price.value });
  // return;

  await detailSave({ ...parm, ...price.value })
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        showMessage &&
          ElMessage({
            type: "success",
            message: "保存成功"
          });
        if (changeEdit) data.value.isEdit = false;
        getDetail();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 顶部编辑状态按钮操作------------------------------------------------------------start
const handelChangeLost = v => {
  if (Object.keys(data.value.budgetItem).length <= 0) {
    ElMessage({
      type: "warning",
      message: "请先选择预算报价模版项"
    });
    return;
  }
  // data.comprehensiveItems.isShowMainProduct = v ? 1 : 0;
  const parm = {
    templateId: data.value.budgetItem.templateId,
    ...data.value.comprehensiveItems
  };
  detailSave(parm)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "编辑成功"
        });
        getDetail();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
const handelChangeMainProduct = v => {
  if (Object.keys(data.value.budgetItem).length <= 0) {
    ElMessage({
      type: "warning",
      message: "请先选择预算报价模版项"
    });
    return;
  }
  // data.comprehensiveItems.isShowLost = v ? 1 : 0;
  console.log(data.value.comprehensiveItems);
  const parm = {
    templateId: data.value.budgetItem.templateId,
    ...data.value.comprehensiveItems
  };
  detailSave(parm)
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "编辑成功"
        });
        getDetail();
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 顶部编辑状态按钮操作------------------------------------------------------------end

// 左侧预算模板列表----------------------------------------------------------------start
// 获取预算报价模板列表
const getList = async () => {
  await getBudgetQuotationList()
    .then(res => {
      console.log(res);
      if (res.code == 200) {
        res.data.normalList.map(it => {
          it.status = it.templateState == 1 ? true : false;
          it.edit = false;
        });
        res.data.setMealList.map(it => {
          it.status = it.templateState == 1 ? true : false;
          it.edit = false;
        });
        data.value.normalList = res.data.normalList;
        data.value.setMealList = res.data.setMealList;
      }
    })
    .catch(err => {
      console.log(err);
    });
};
// 编辑名称
const handelBlurs = item => {
  basicSave(item).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "编辑成功"
      });
      //   编辑成功后获取列表
      getList();
    }
  });
};
// 删除
const handelDeleteUp = item => {
  const parms = {
    templateId: item.templateId
  };
  getBudDelete(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      // 删除成功后获取列表
      getList();
    }
  });
};
const handelCopy = (item, budgetType) => {
  const parms = {
    templateId: item.templateId,
    budgetType: budgetType
  };
  templateCopy(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "复制成功"
      });
      // ��贝成功后获取列表
      getList();
    }
  });
};
// 更新状态
const handelCgStatus = item => {
  const parms = {
    templateId: item.templateId,
    templateState: !item.status ? 1 : 2
  };
  updateTemplateStatus(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "状态更新成功"
      });
      //   状态更新成功后获取列表
      getList();
    }
  });
};

const handelChange = handelCgStatus;
// 点击左侧模板每一项事件
const currTemp = ref({});
const handelclickItem = async item => {
  currTemp.value = item;
  localStorage.setItem("budget", JSON.stringify(currTemp.value));
  data.value.templateId = item.templateId;
  // 保存套餐类型
  data.value.budgetType = item.budgetType;
  // 让模板不能编辑
  data.value.isEdit = false;
  // 获取��合项详情
  // getDetail();
  // 赋值给预算模板选中项
  data.value.budgetItem = item;
  getSpaceArrList();
  await templateDetail(item.templateId)
    .then(res => {
      res.data.isShowLostCopy = res.data.isShowLost == 1 ? true : false;
      res.data.isShowMainProductCopy = res.data.isShowMainProduct == 1 ? true : false;
      data.value.comprehensiveItems = res.data;
      //正价、特价
      price.value = {
        regularDiscount: res.data.regularDiscount,
        regularViewStatus: res.data.regularViewStatus,
        specialDiscount: res.data.specialDiscount,
        specialViewStatus: res.data.specialViewStatus
      };

      // 如果处于编辑状态（route的edit参数等于1），自动赋值 data.isEdit = true
      nextTick(() => {
        setTimeout(() => {
          const _edit = route.query.edit;
          data.value.isEdit = _edit === "1" ? true : false;
        }, 0);
        setTimeout(() => {
          rowDrop();
          rowDrop2();
          console.log("可以开始拖拽了");
        }, 500);
      });
    })
    .catch(err => {
      console.log(err);
    });
};

const openSetTimeModal = item => {
  currTemp.value = item;
  data.value.templateTime = [];
  if (item.isSetTiming) {
    data.value.templateTime = [new Date(item.timingStart), new Date(item.timingEnd)];
  }
  data.value.isSetTiming = item.isSetTiming;
  data.value.setTimeFlag = true;
};

const handelSetTime = async (clear = false) => {
  let param = { templateId: currTemp.value.templateId };
  if (!clear) {
    param.timingStart = formatDate(data.value.templateTime[0], "yyyy-MM-dd HH:mm:ss");
    param.timingEnd = formatDate(data.value.templateTime[1], "yyyy-MM-dd HH:mm:ss");
  }
  if (data.value.templateTime[0] && data.value.templateTime[1]) {
    let res = await setTemplateTime(param);
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: clear ? "清除成功" : "定时成功"
      });
      getList();
      data.value.setTimeFlag = false;
    }
  } else {
    ElMessage({
      type: "error",
      message: "请选择时间"
    });
  }
};
// 获取综合项详情
const getDetail = () => {
  templateDetail(data.value.budgetItem.templateId)
    .then(res => {
      data.value.comprehensiveItems = res.data;
      //正价、特价
      price.value = {
        regularDiscount: res.data.regularDiscount,
        regularViewStatus: res.data.regularViewStatus,
        specialDiscount: res.data.specialDiscount,
        specialViewStatus: res.data.specialViewStatus
      };
    })
    .catch(err => {
      console.log(err);
    });
};
// 左侧预算模板列表----------------------------------------------------------------end
// 空间---------------------------------------------------------------------------start
const handelClickSpaceAdd = () => {
  if (Object.keys(data.value.budgetItem).length <= 0) {
    ElMessage({
      type: "error",
      message: "请先选择预算报价模版"
    });
    return;
  } else {
    const parms = {
      templateId: data.value.budgetItem.templateId,
      spaceName: "客厅"
    };
    spaceSave(parms).then(async res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "添加成功"
        });
        await handelClickSave([], false, false);
        // 添加成功后获取列表
        getSpaceArrList();
        // 获取列表
        getDetail();
      }
    });
  }
};
// 获取空间列表
const getSpaceArrList = () => {
  getSpaceList(data.value.budgetItem.templateId).then(res => {
    if (res.code == 200) {
      res.data.map(it => {
        it.edit = false;
      });
      data.value.spaceListArr = res.data;
    }
  });
};
// 空间复制
const handelClickSpaceCopy = item => {
  const parms = {
    spaceId: item.spaceId
  };
  spaceCopy(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "复制成功"
      });
      // 复制成功后获取列表
      // getSpaceArrList();
      handelclickItem(currTemp.value);
    }
  });
};
// 编辑后失去焦点保存
const handelSpaceBlurs = item => {
  const parms = {
    spaceId: item.spaceId,
    spaceName: item.spaceName
  };
  spaceSave(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "编辑成功"
      });
      // 编辑成功后获取列表
      // getSpaceArrList();
      handelclickItem(currTemp.value);
    }
  });
};
// 删除空间
const handelSpaceDelet = item => {
  const parms = {
    spaceId: item.spaceId
  };
  spaceDelete(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      // 删除成功后获取列表
      // getSpaceArrList();
      handelclickItem(currTemp.value);
    }
  });
};
// 空间---------------------------------------------------------------------------end

// 综合---------------------------------------------------------------------------start
// 删除
const handelClickDeletItem = item => {
  if (!data.value.isEdit) {
    ElMessage({
      type: "warning",
      message: "请先确认是否编辑状态"
    });
    return;
  }
  const parms = {
    contentId: item.contentId
  };
  deleteSpaceItem(parms).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      // 删除成功后获取综合详情列表
      getDetail();
    }
  });
};
// 综合---------------------------------------------------------------------------end
// 新增类型选中
const handelClickType = (item, index) => {
  data.value.num = index;
  data.value.addType = item.type;
};
// 表格拖拽
const rowDrop = () => {
  // const tbody = document.querySelector(".el-table__body-wrapper tbody");
  const tbodys = document.getElementsByClassName("table-item");
  for (let i = 0; i <= tbodys.length - 1; i++) {
    console.log("BBBBBBBB");
    const tbody = tbodys[i].querySelector(".el-table__body-wrapper tbody");
    Sortable.create(tbody, {
      animation: 150,
      ghostClass: "blue-background-class",
      handle: ".my-handle",
      onEnd({ newIndex, oldIndex }) {
        data.value.comprehensiveItems.spaceList[i].quotaList.splice(
          newIndex,
          0,
          data.value.comprehensiveItems.spaceList[i].quotaList.splice(oldIndex, 1)[0]
        );
        const newArray = data.value.comprehensiveItems.spaceList[i].quotaList.slice(0);
        data.value.comprehensiveItems.spaceList[i].quotaList = [];
        nextTick(function () {
          newArray.map((item, index) => {
            item.showOrder = index + 1;
          });
          data.value.comprehensiveItems.spaceList[i].quotaList = newArray;
          // console.log("拖拽后的数据===", data.comprehensiveItems.spaceList[i].quotaList);
          //改变顺序之后，立即请求接口保存数据
          handelClickSave([], false, false);
        });
      }
    });
  }
};
// 空间拖拽
const rowDrop2 = () => {
  const tbody = document.querySelector(".el-anchor .el-anchor__list");
  Sortable.create(tbody, {
    animation: 150,
    ghostClass: "blue-background-class",
    // handle: ".my-handle",
    onEnd({ newIndex, oldIndex }) {
      if (newIndex == oldIndex) return;
      const _spaceListArr = JSON.parse(JSON.stringify(data.value.spaceListArr)) || [];
      _spaceListArr?.splice(newIndex, 0, _spaceListArr?.splice(oldIndex, 1)[0]);
      const newArray = _spaceListArr?.slice(0);
      // data.spaceListArr = [];
      nextTick(function () {
        data.value.spaceListArr = newArray;
        console.log("拖拽后的数据===", data.value.spaceListArr);
        handelClickSave(data.value.spaceListArr, false, false);
      });
    }
  });
};

onMounted(async () => {
  // 初始进入获取列表
  // await getList();
  // getContractType();

  setTimeout(() => {
    units.value = useCodeArrStore().getDict("shop_unit");
    console.log("单位数据字典===", units.value);
  }, 1000);
});
</script>
<style scoped lang="scss">
:deep(.package_restrictions_child) {
  .total-price {
    .el-input__inner {
      color: red;
      font-weight: bold;
    }
  }
}
.footer_btn {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 220px;
  z-index: 22;

  height: 80px;
  background-color: #fff;
  padding: 0 20px;
  box-shadow: 0px -5px 10px 0px rgba(66, 78, 102, 0.15);
  border-radius: 0px 0px 10px 0px;
  &.tc-height {
    height: 126px;
  }
  &.edit-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .tc-wrap {
  }
  .qd-wrap {
    width: 100%;
  }
  // width: 100%;
  .foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  button {
    padding: 0px 20px;
    border-radius: 5px;
    // color: #fff;
    font-size: 14px;
    border-radius: 0;
  }
  .package_restrictions {
    display: flex;
    min-height: 40px;
    align-items: center;
    padding: 5px 20px;
    margin: 0 -20px;
    border-bottom: 1px solid #c2d4e8;
    &_child {
      display: flex;
      align-items: center;
      // margin-right: 20px;
      span {
        font-size: 14px;
        // margin-right: 6px;
        i {
          font-style: normal;
          color: #ff3333;
        }
      }
    }
  }
  .foot-bottom-tc {
    .top,
    .bottom {
      display: flex;
      justify-content: space-between;
    }
  }
}
:deep(.el-anchor) {
  .el-anchor__list {
    padding-left: 0 !important;
    background-color: #f2f3f5;
  }
  .el-anchor__marker {
    display: none;
  }
  .el-anchor__link {
    color: #191919;
    padding: 7px 10px 7px 20px;
    &:hover {
      color: #191919;
    }
    &.is-active {
      background-color: #d9e8ff !important;
      color: #191919;
      .top-right {
        color: #007dff;
      }
    }
  }
  .list-item {
    font-size: 14px;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
:deep(.el-table) {
  .el-input__wrapper,
  .el-select__wrapper {
    background-color: white !important;
  }
}
.fottor {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background-color: #fff;
}
:deep(.el-container) {
  .el-aside {
  }
  .el-main {
    padding: 0;
    position: relative;
  }
}
.active {
  border: 2px solid #409eff !important;
  box-sizing: border-box;
  border-radius: 10px;
}
.budget-management {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #e2effe;
  .left {
    flex: 1;
    max-width: 300px;
    min-width: 300px;
    height: 100%;
    background: #f6f8fa;
    box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
    border-radius: 10px 10px 10px 10px;
    padding: 20px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    .header {
      padding: 0 0 20px 0;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      span {
        margin-left: 10px;
        font-size: 18px;
        color: #131414;
      }
      span::before {
        content: "";
        width: 6px;
        height: 6px;
        position: absolute;
        left: 0px;
        background-color: #409eff;
        top: 8px;
        border-radius: 50%;
      }
    }
    .inventory-list {
      height: calc(100% - 91px);
      overflow-y: scroll;
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 70px;
    }
  }
  .right {
    flex: 2;
    height: 100%;
    margin-left: 20px;
    background-color: #fff;
    border-radius: 12px;
    .right-top {
      height: 60px;
      border-bottom: 1px solid #c2d4e8;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .title {
        margin-right: 23px;
        span {
          margin-left: 10px;
          font-size: 18px;
          color: #131414;
          position: relative;
          margin-left: 30px;
        }
        span::before {
          content: "";
          width: 6px;
          height: 6px;
          position: absolute;
          left: -10px;
          background-color: #409eff;
          top: 8px;
          border-radius: 50%;
        }
      }
      .switch {
        margin-right: 23px;
      }
      .btn {
        display: flex;
        align-items: center;
        .line {
          display: inline-block;
          width: 2px;
          height: 16px;
          background-color: #e1e6ed;
          margin: 0 10px;
        }
      }
    }
    .right-bottom {
      display: flex;
      height: calc(100% - 60px);
      &.tc-wrap {
        height: calc(100% - 60px);
      }
      .right-bottom-left {
        flex: 1;
        max-width: 200px;
        // padding: 20px;
        min-width: 200px;
        box-sizing: border-box;
        position: relative;
        border-right: 1px solid #c2d4e8;
        .comprehensive {
          padding-left: 20px;
          padding-top: 20px;
          font-size: 14px;
          color: #3d3d3d;
        }
        .btn_space {
          padding: 0 10px;
          position: absolute;
          bottom: 0;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 120px;
          border-top: 1px solid #c2d4e8;
          box-sizing: border-box;
          & > div {
            & > span {
              color: #1a1a1a;
            }
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
      .right-bottom-right {
        flex: 2;
        background: #f5f7fa;
        overflow-y: scroll;
        .comprehensive_items {
          background-color: #fff;
          padding: 20px;
          box-sizing: border-box;
          overflow: hidden;
          .comprehensive_items_header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            div:nth-child(1) {
              span:nth-child(1) {
                font-size: 18px;
                color: #3d3d3d;
              }
              span:nth-child(2) {
                font-size: 18px;
                color: #86909c;
              }
            }
            div:nth-child(2) {
              display: flex;
              align-items: center;
              .line {
                display: inline-block;
                width: 2px;
                height: 16px;
                background: #e1e6ed;
                margin: 0 20px;
              }
            }
          }
          .remark {
            display: flex;
            align-items: center;
            margin: 20px 0;
            span {
              display: inline-block;
              width: 80px;
            }
          }
        }
        .manage_content {
          display: flex;
          background-color: #fff;
          padding: 20px;
          .manage_content_left {
            margin: 0 10px 0 0;
            div:nth-child(2) {
              display: flex;
              align-items: center;
              span {
                display: inline-block;
                width: 40px;
              }
            }
            div:nth-child(1) {
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              span {
                font-size: 18px;
                color: #3d3d3d;
              }
            }
          }
        }
      }
    }
  }
}
.img_list {
  display: flex;
  align-items: center;
  div:nth-child(2) {
    margin: 0 0px 0 20px;
  }
}
.type_child {
  img {
    width: 100%;
  }
}
// 工艺标准图
.process_standard_diagram {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  img {
    margin: 0 10px 0 0;
    width: 100px;
  }
}
.process_standard_diagram_video {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  video {
    width: 100px;
    height: 120px;
    margin-bottom: 10px;
  }
}
// 详情--------------
.title {
  height: 50px;
  display: flex;
  align-items: center;
  span {
    font-size: 16px;
    color: #86909c;
  }
}
.content_list {
  .child {
    display: flex;
    justify-content: space-between;
    background: #f6f8fa;
    border-radius: 4px 4px 4px 4px;
    padding: 20px;
    margin-bottom: 20px;
    .child_left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .top {
        font-size: 14px;
        color: #303133;
        padding: 0;
        background-color: transparent;
      }
      ul {
        display: flex;
        align-items: center;
        li {
          padding: 6px 10px;
          background: #ffffff;
          border-radius: 20px 20px 20px 20px;
          border: 1px solid #e1e6ed;
          box-sizing: border-box;
          margin: 0 10px 0 0;
        }
      }
    }
    .child_right {
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
        :deep(.el-input) {
          width: 80px;
        }
      }
    }
  }
}
.imgs {
  display: flex;
  flex-wrap: wrap;
  .standard_diagram_item {
    position: relative;
    img {
      width: 100px;
      height: 100px;
      margin: 0 10px 0 0;
    }
    .close_icon {
      position: absolute;
      right: 15px;
      top: 0px;
      z-index: 1;
      cursor: pointer;
    }
    .close_icon :hover {
      color: #007dff;
    }
  }
}
.video_content {
  display: flex;
  flex-direction: row;
  align-items: center;
  // justify-content: center;
  overflow-x: scroll;
  flex-wrap: wrap;
  .video_item {
    width: 150px;
    height: auto;
    margin: 0 16px 0 0;
    position: relative;
    video {
      width: 100%;
      // height: 50%;
    }
    .close_icon {
      position: absolute;
      z-index: 99;
      right: 6px;
      top: 4px;
      cursor: pointer;
    }
    .close_icon :hover {
      color: #007dff;
    }
  }
}

:deep(.el-drawer__body) {
  padding: 0 !important;
}
:deep(.my-drawer) {
  .el-drawer__body {
    padding: 20px !important;
  }
}
// 定额导入样式------
.quota_btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 20px;
  background: #ffffff;
  box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
  // border-radius: 0px 0px 0px 10px;
}
.affix_top {
  display: flex;
  background: white;
  justify-content: space-between;
  padding: 10px 20px;
  box-shadow: 0px 5px 10px 0px rgba(4, 19, 74, 0.1);
  position: sticky;
  top: 0;
  z-index: 22;
  div {
    display: flex;
    align-items: center;
    .el-form-item {
      margin-bottom: 0px;
    }
  }
}
.dialog_title {
  color: #131414;
  font-size: 18px;
}
.dialog_title::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #409eff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 3px;
}
.dialog_content {
  padding: 25px 0 10px;
}
.dialog_footer {
  text-align: center;
}
</style>
